<script setup>
import { ref, nextTick } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { get, post } from "@/request/request";
import { config } from "@/config";
import TnSteps from "@tuniao/tnui-vue3-uniapp/components/steps/src/steps.vue";
import TnStepsItem from "@tuniao/tnui-vue3-uniapp/components/steps/src/steps-item.vue";
import TnForm from "@tuniao/tnui-vue3-uniapp/components/form/src/form.vue";
import TnImageUpload from "@tuniao/tnui-vue3-uniapp/components/image-upload/src/image-upload.vue";
import TnIcon from "@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue";
import TnInput from "@tuniao/tnui-vue3-uniapp/components/input/src/input.vue";
import TnFormItem from "@tuniao/tnui-vue3-uniapp/components/form/src/form-item.vue";
import TnRadio from "@tuniao/tnui-vue3-uniapp/components/radio/src/radio.vue";
import TnRadioGroup from "@tuniao/tnui-vue3-uniapp/components/radio/src/radio-group.vue";
import TnPicker from "@tuniao/tnui-vue3-uniapp/components/picker/src/picker.vue";
import TnDateTimePicker from "@tuniao/tnui-vue3-uniapp/components/date-time-picker/src/date-time-picker.vue";
import TnPopup from "@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue";
import TnCheckbox from "@tuniao/tnui-vue3-uniapp/components/checkbox/src/checkbox.vue";
import TnCheckboxGroup from "@tuniao/tnui-vue3-uniapp/components/checkbox/src/checkbox-group.vue";
import TnButton from "@tuniao/tnui-vue3-uniapp/components/button/src/button.vue";

//标签自己
const tags = ref({})

// 当前步骤
const currentStep = ref(-1);
const actionUrl = config.baseUrl + "/public_api/upload";
const hasEdit = ref(false);
//图片上传ref
const imageUploadavatar = ref("");

// 步进条数据
const stepsData = [
  {
    title: "教师信息",
    icon: "floral-fill",
    activeIcon: "write",
  },
  {
    title: "证件资料",
    icon: "write",
    activeIcon: "write",
  },
];
const genders = ref([
  {
    label: "男",
    value: 1,
  },
  {
    label: "女",
    value: 2,
  },
]);
const tutorData = ref([
  {
    label: "本人上门",
    value: 1,
  },
  {
    label: "网上辅导",
    value: 2,
  },
  {
    label: "本人上门、网上辅导",
    value: 3,
  },
]);
const statusData = ["在读", "实习", "在职", "研究人员"];
const educationData = ref([
  {
    label: "初中",
    value: 1,
  },
  {
    label: "高中",
    value: 2,
  },
  {
    label: "大专",
    value: 3,
  },
  {
    label: "本科",
    value: 4,
  },
  {
    label: "硕士研究生",
    value: 5,
  },
  {
    label: "博士研究生",
    value: 6,
  },
]);
//籍贯数据
const regionsData = ref([]);
const regionValue = ref([]);
const openRegion = ref(false);
const regionName = ref("请选择地区");
//生日
const openDateTimePicker = ref(false);
const openCurrentIdentity = ref(false); //目前身份
const educationName = ref("请选择学历"); //学历
const openEduPicker = ref(false); //学历
const openWorks = ref(false);
const worksValue = ref([]);
const worksName = ref("请选择工作地区");
//授课科目
const openCourseData = ref(false);
const courseData = ref([]);
const courseName = ref("请选择授课科目");
const openTutor = ref(false);
const tutorName = ref("请选择辅导方式");
//授课区域
const openTarea = ref(false);
const tareaDatavalue = ref([]);
const tareaName = ref("请选择授课区域");
// 文件上传所属类型
const uploadFileType = ref("");
//表单
const teacherDataForm = ref({
  id: null,
  name: "",
  phone: "",
  idCard: "",
  gender: 1,
  wechat: "",
  birthday: "",
  graduate: "",
  education: "",
  major: "",
  currentIdentity: "",
  idCardPhoto: "",
  diploma: "",
  honor: [],
  jobProve: "",
  certificate: [],
  province: 0,
  city: 0,
  county: "",
  address: "",
  evaluation: "",
  wProvince: "",
  wCity: "",
  wCounty: "",
  tCourse: [],
  tArea: [],
  tutor: "请选择辅导方式",
  avatar: "",
  tags: []
});
// 规则
const formRules = {
  name: [
    {
      required: true,
      message: "请输入用户名",
      trigger: ["change", "blur"],
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: ["change", "blur"],
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "手机号格式不正确",
      trigger: ["change", "blur"],
    },
  ],
  idCard: [
    {
      required: true,
      message: "请输入身份证号码",
      trigger: ["change", "blur"],
    },
    {
      pattern:
        /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/,
      message: "身份证号码格式不正确",
      trigger: ["change", "blur"],
    },
  ],
};
//上传证件
//上传身份证
// const uploadFileType = ref('');

const imageUploadidCardPhoto = ref();
const imageUploadDiploma = ref();
const imageUploadhonor = ref();
const imageUploadjobProve = ref();
const imageUploadcertificate = ref();
// const imageUploadavatar = ref();

const chooseIdCardPhoto = () => {
  imageUploadidCardPhoto.value?.chooseFile();
  uploadFileType.value = "idCardPhoto";
};

const chooseUploadDiploma = () => {
  imageUploadDiploma.value?.chooseFile();
  uploadFileType.value = "diploma";
};

const chooseUploadhonor = () => {
  imageUploadhonor.value?.chooseFile();
  uploadFileType.value = "honor";
};
const chooseUploadjobProve = () => {
  imageUploadjobProve.value?.chooseFile();
  uploadFileType.value = "jobProve";
};
const chooseUploadcertificate = () => {
  imageUploadcertificate.value?.chooseFile();
  uploadFileType.value = "certificate";
};
const chooseUploadavatar = () => {
  imageUploadavatar.value?.chooseFile();
  uploadFileType.value = "avatar";
};
//去除图片
const removeImg = (e, index = null) => {
  if (index === null) {
    teacherDataForm.value[e] = "";
  } else {
    teacherDataForm.value[e] = teacherDataForm.value[e].filter(
      (item, idx) => idx !== index
    );
  }
  if (e === "idCardPhoto") {
    imageUploadidCardPhoto.value?.clear();
  }
  if (e === "diploma") {
    imageUploadDiploma.value?.clear();
  }
  if (e === "jobProve") {
    imageUploadjobProve.value?.clear();
  }
  if (e === "avatar") {
    imageUploadjobProve.value?.clear();
  }
};

const uploadHandle = (file) => {
  return new Promise((resolve, reject) => {
    const url = file.path;
    uni.uploadFile({
      url: actionUrl,
      filePath: url,
      name: "file",
      success: (res) => {
        const data = JSON.parse(res.data);
        if (uploadFileType.value === "idCardPhoto") {
          teacherDataForm.value.idCardPhoto = data.data.url;
        }
        if (uploadFileType.value === "diploma") {
          teacherDataForm.value.diploma = data.data.url;
        }
        if (uploadFileType.value === "honor") {
          teacherDataForm.value.honor.push(data.data.url);
        }
        if (uploadFileType.value === "jobProve") {
          teacherDataForm.value.jobProve = data.data.url;
        }
        if (uploadFileType.value === "certificate") {
          teacherDataForm.value.certificate.push(data.data.url);
        }
        if (uploadFileType.value === "avatar") {
          teacherDataForm.value.avatar = data.data.url;
        }
        resolve(data.data.url);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
};
//处理身份证号码
const idCardClick = () => {
  const { birthday, gender } = extractInfoFromIDCard(
    teacherDataForm.value.idCard
  );
  teacherDataForm.value.gender = gender;
  teacherDataForm.value.birthday = birthday;
};
//点击籍贯选择地区
const confirmRegions = (value) => {
  if (value.length === 3) {
    teacherDataForm.value.province = value[0];
    teacherDataForm.value.city = value[1];
    teacherDataForm.value.county = value[2];
    regionName.value = convertRegionNames(value);
  }
};
//工作地区
const workPickerClick = (value) => {
  if (value.length === 3) {
    teacherDataForm.value.wProvince = value[0];
    teacherDataForm.value.wCity = value[1];
    teacherDataForm.value.wCounty = value[2];
    worksName.value = convertRegionNames(value);
  }
};

//处理籍贯地区名称
const convertRegionNames = (ids) => {
  const names = [];
  let currentLevel = regionsData.value;
  for (let id of ids) {
    const item = currentLevel.find((item) => item.value === id);
    if (item) {
      names.push(item.label);
      currentLevel = item.children; // Update current level to the children of the current item
    } else {
      break; // Break the loop if item not found
    }
  }
  return names.join(", ");
};
//选择学历
const confirmEdu = (value) => {
  const eduName = educationData.value.find((item) => item.value === value);
  educationName.value = eduName.label;
};
//选择授课科目
const confirmTCourse = (value) => {
  courseName.value = convertCourseName(value);
};

const convertCourseName = (ids) => {
  const names = [];
  let currentLevel = extractCourses(courseData.value);
  for (let id of ids) {
    const item = currentLevel.find((item) => item.id === id);
    if (item) {
      names.push(item.name);
    } else {
      break; // Break the loop if item not found
    }
  }
  return names.join(", ");
};

// 递归函数
const extractCourses = (data) => {
  const courses = [];
  data.forEach((item) => {
    if (item.course && item.course.length > 0) {
      item.course.forEach((course) => {
        courses.push(course);
      });
    }
    if (item.grade) {
      const subCourses = extractCourses(item.grade);
      courses.push(...subCourses);
    }
  });

  return courses;
};
//选择辅导方式
const tutorPickerClick = (value) => {
  const findName = tutorData.value.find((item) => item.value === value);
  tutorName.value = findName.label;
};
//选择授课区域
const areapickerClick = (value) => {
  if (value) {
    teacherDataForm.value.tArea[0] = value[2];
    tareaName.value = convertRegionNames(value);
  }
};
/**
 * 从身份证号码中取出出生日和性别
 * @param {string} idCard 身份证号码
 * @returns {Object} 包含出生日期和性别的对象
 */
const extractInfoFromIDCard = (idCard) => {
  const birthday = idCard.substring(6, 14); // 从身份证号码中提取出生日部分
  const year = birthday.substring(0, 4);
  const month = birthday.substring(4, 6);
  const day = birthday.substring(6, 8);
  const formattedBirthday = `${year}-${month}-${day}`;
  const genderCode = parseInt(idCard.charAt(16), 10); // 获取身份证号码中的性别码
  const gender = genderCode % 2 === 0 ? "女" : "男";
  return {
    birthday: formattedBirthday,
    gender: gender === "男" ? 1 : 2,
  };
};
// 获取数据
const getInfoData = () => {
  get("/get_be_teacher", null, {
    sessionKey: uni.getStorageSync("sessionKey"),
  }).then((res) => {
    const { data } = res;
    if (data.id != null) {
      hasEdit.value = data.auth;
      teacherDataForm.value.id = data.id;
      teacherDataForm.value.name = data.name;
      teacherDataForm.value.phone = data.phone;
      teacherDataForm.value.idCard = data.idCard;
      teacherDataForm.value.avatar = data.avatar;
      teacherDataForm.value.gender = data.gender;
      teacherDataForm.value.birthday = data.birthday;
      teacherDataForm.value.wechat = data.wechat;
      //籍贯处理
      teacherDataForm.value.province = data.province;
      teacherDataForm.value.city = data.city;
      teacherDataForm.value.county = data.county;
      const reginNams = [];
      reginNams[0] = data.province;
      reginNams[1] = data.city;
      reginNams[2] = data.county;
      regionValue.value = reginNams;
      confirmRegions(reginNams);
      teacherDataForm.value.graduate = data.graduate;
      teacherDataForm.value.education = data.education;
      confirmEdu(data.education);
      teacherDataForm.value.major = data.major;
      teacherDataForm.value.currentIdentity = data.currentIdentity;
      //工作地址
      teacherDataForm.value.wProvince = data.wprovince;
      teacherDataForm.value.wCity = data.wcity;
      teacherDataForm.value.wCounty = data.wcounty;
      const worksNames = [];
      worksNames[0] = data.wprovince;
      worksNames[1] = data.wcity;
      worksNames[2] = data.wcounty;
      worksValue.value = worksNames;
      workPickerClick(worksNames);
      teacherDataForm.value.tCourse = data.tcourse;
      confirmTCourse(data.tcourse);
      //授课区域
      teacherDataForm.value.tArea = data.tarea;
      teacherDataForm.value.tutor = data.tutor;
      tutorPickerClick(data.tutor);
      tareaName.value = findParentsNameById(
        regionsData.value,
        parseInt(data.tarea[0])
      ).join(", ");
      tareaDatavalue.value = findParentsIdById(
        regionsData.value,
        parseInt(data.tarea[0])
      );
      teacherDataForm.value.evaluation = data.evaluation;
      teacherDataForm.value.address = data.address;
      teacherDataForm.value.idCardPhoto = data.idCardPhoto;
      teacherDataForm.value.diploma = data.diploma;
      teacherDataForm.value.honor = data.honor;
      teacherDataForm.value.jobProve = data.jobProve;
      teacherDataForm.value.certificate = data.certificate;
    }
  });
};

const findParentsNameById = (data, id) => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].value === id) {
      return [data[i].label];
    } else if (data[i].children && data[i].children.length > 0) {
      const result = findParentsNameById(data[i].children, id);
      if (result) {
        return [data[i].label, ...result];
      }
    }
  }
  return null;
};

const findParentsIdById = (data, id) => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].value === id) {
      return [data[i].value];
    } else if (data[i].children && data[i].children.length > 0) {
      const result = findParentsIdById(data[i].children, id);
      if (result) {
        return [data[i].value, ...result];
      }
    }
  }
  return null;
};

// 获取地区
const getRegion = () => {
  get("/public_api/get_regin").then((res) => {
    const { data } = res;
    // 转换地区数据
    regionsData.value = convertReginData(data);
    regionsData.value.unshift({
      label: "请选择",
      value: "",
      children: [
        {
          label: "请选择",
          value: "",
          children: [{ label: "请选择", value: "" }],
        },
      ],
    });
  });
};

const course = () => {
  get("/public_api/get_grade_course").then((res) => {
    const { data } = res;
    courseData.value = data;
  });
};
// 转换地区数据
const convertReginData = (arr) => {
  return arr.map((item) => {
    const { name, id } = item;
    const obj = {
      label: name,
      value: id,
    };
    if (item.children && item.children.length > 0) {
      obj.children = convertReginData(item.children);
    }
    return obj;
  });
};

const submitForm = () => {
  if (currentStep.value === -1) {
    let allFieldsFilled = true;
    const checkField = (field, message) => {
      if (!field) {
        uni.showToast({
          title: message,
          icon: "none",
        });
        allFieldsFilled = false;
      }
    };
    checkField(teacherDataForm.value.avatar, "头像不能为空");
    checkField(teacherDataForm.value.name, "用户名不能为空");
    checkField(teacherDataForm.value.phone, "手机号不能为空");
    checkField(teacherDataForm.value.idCard, "身份证号码不能为空");
    checkField(teacherDataForm.value.gender, "性别不能为空");
    checkField(teacherDataForm.value.wechat, "微信号不能为空");
    checkField(teacherDataForm.value.birthday, "生日不能为空");
    checkField(teacherDataForm.value.province, "省份不能为空");
    checkField(teacherDataForm.value.city, "城市不能为空");
    checkField(teacherDataForm.value.graduate, "毕业院校不能为空");
    checkField(teacherDataForm.value.education, "学历不能为空");
    checkField(teacherDataForm.value.major, "所学专业不能为空");
    checkField(teacherDataForm.value.currentIdentity, "目前身份不能为空");
    checkField(teacherDataForm.value.wProvince, "工作省不能为空");
    checkField(teacherDataForm.value.wCity, "工作城市不能为空");
    checkField(teacherDataForm.value.county, "家庭位置不能为空");
    checkField(teacherDataForm.value.tCourse, "教课科目不能为空");
    checkField(teacherDataForm.value.tArea, "授课区域不能为空");
    checkField(teacherDataForm.value.evaluation, "自我评价不能为空");
    checkField(teacherDataForm.value.address, "详细地址不能为空");
    if (allFieldsFilled) {
      currentStep.value++;
    }
  } else if (currentStep.value === 0) {
    let allFieldsFilled = true;

    const checkField = (field, message) => {
      if (!field) {
        uni.showToast({
          title: message,
          icon: "none",
        });
        allFieldsFilled = false;
      }
    };
    checkField(teacherDataForm.value.idCardPhoto, "身份证图片不能为空");
    checkField(teacherDataForm.value.diploma, "毕业证不能为空");
    if (allFieldsFilled) {
      post("/be_teacher", teacherDataForm.value, {
        "Content-Type": "application/x-www-form-urlencoded",
        sessionKey: uni.getStorageSync("sessionKey"),
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          uni.showToast({
            title: "提交成功",
            icon: "success",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        }
      });
    }
  }
};

const tagsList = () => {
  get('/public_api/get_tags/0').then(res => {
    const { data } = res;
    tags.value = data
    console.log('tagsList', data);
  })
}

const tagsClick = (e) => {
  teacherDataForm.value.tags.push(e)
}

onShow(() => {
  getRegion();
  course();
  tagsList()
  nextTick(() => {
    getInfoData();
  });
});
</script>

<template>
  <view class="teacher-info">
    <view class="teacher-info-steps">
      <TnSteps v-model="currentStep" mode="number">
        <TnStepsItem v-for="(item, index) in stepsData" :key="index" active-color="#0045cf" :title="item.title"
          :icon="item.icon" :active-icon="item.activeIcon" />
      </TnSteps>
    </view>

    <view class="teacher-info-data">
      <TnForm :model="teacherDataForm" :rules="formRules">
        <template v-if="currentStep === -1">
          <view class="teacher-info-data-avatar">
            <template v-if="teacherDataForm.id != null && teacherDataForm.avatar">
              <view style="width: 160rpx; height: 160rpx; position: relative">
                <view class="remove-img" v-if="hasEdit" @tap.remove="removeImg('avatar')">
                  X
                </view>
                <image style="width: 160rpx; height: 160rpx" :src="teacherDataForm.avatar
                  ? config.baseUrl + '/file/' + teacherDataForm.avatar
                  : null
                  " />
              </view>
            </template>
            <template v-else>
              <TnImageUpload ref="imageUploadavatar" :limit="1" :action="actionUrl" class="upload_img"
                :show-remove="true" :custom-upload-handler="uploadHandle">
                <template #uploadBtn>
                  <view class="upload-new-btn tn-flex-center" style="
                      height: 160rpx;
                      width: 160rpx;
                      border-radius: 9999rpx;
                    " @tap.stop="chooseUploadavatar">
                    <TnIcon name="add" size="70" />
                  </view>
                </template>
                <template #uploadImage="{ data }">
                  <view class="remove-img" @tap.remove="removeImg('avatar')">
                    X
                  </view>
                  <image style="width: 160rpx; height: 160rpx" :src="teacherDataForm.avatar
                    ? config.baseUrl + '/file/' + teacherDataForm.avatar
                    : null
                    " />
                </template>
              </TnImageUpload>
            </template>
            <text>头像</text>
          </view>
          <TnFormItem label="用户名" prop="name">
            <TnInput :underline="true" placeholder="请输入用户名" size="sm" v-model="teacherDataForm.name" />
          </TnFormItem>
          <TnFormItem label="手机号" prop="phone">
            <TnInput :maxlength="11" :underline="true" placeholder="请输手机号" size="sm" v-model="teacherDataForm.phone" />
          </TnFormItem>
          <TnFormItem label="身份证号" prop="idCard">
            <TnInput :underline="true" placeholder="请输入身份证号码" size="sm" v-model="teacherDataForm.idCard"
              @blur="idCardClick" />
          </TnFormItem>
          <TnFormItem label="性别">
            <view style="width: 100%; display: flex; justify-content: space-evenly">
              <TnRadioGroup v-model="teacherDataForm.gender" active-color="#0d57d6" size="lg">
                <template v-for="item in genders">
                  <TnRadio :label="item.value">{{ item.label }}</TnRadio>
                </template>
              </TnRadioGroup>
            </view>
          </TnFormItem>
          <TnFormItem label="微信号">
            <TnInput :underline="true" placeholder="请输入微信号" size="sm" v-model="teacherDataForm.wechat" />
          </TnFormItem>
          <view class="time">
            <TnFormItem label="生日"></TnFormItem>
            <view style="display: flex" @click="() => (openDateTimePicker = true)">
              <view>{{ teacherDataForm.birthday }}</view>
              <TnIcon name="right" />
            </view>
          </view>
          <view class="time">
            <TnFormItem label="箱贵"></TnFormItem>
            <view style="display: flex" @click="() => (openRegion = true)">
              <view>{{ regionName }}</view>
              <TnIcon name="right" />
            </view>
          </view>
          <TnFormItem label="毕业高校">
            <TnInput :underline="true" placeholder="请输入高校毕业" size="sm" v-model="teacherDataForm.graduate" />
          </TnFormItem>
          <view class="time">
            <TnFormItem label="毕业学历"></TnFormItem>
            <view style="display: flex" @click="() => (openEduPicker = true)">
              <view>{{ educationName }}</view>
              <TnIcon name="right" />
            </view>
          </view>
          <TnFormItem label="所毕业专业">
            <TnInput :underline="true" placeholder="请输入你的专业" size="sm" v-model="teacherDataForm.major" />
          </TnFormItem>
          <view class="time">
            <TnFormItem label="目前身份"></TnFormItem>
            <view style="display: flex" @click="() => (openCurrentIdentity = true)">
              <view>{{
                teacherDataForm.currentIdentity
                  ? teacherDataForm.currentIdentity
                  : "请选择"
              }}
              </view>
              <TnIcon name="right" />
            </view>
          </view>
          <view class="time">
            <TnFormItem label="学校/工作地址"></TnFormItem>
            <view style="display: flex" @click="() => (openWorks = true)">
              <view>{{ worksName }}</view>
              <TnIcon name="right" />
            </view>
          </view>

          <view class="time">
            <TnFormItem label="教授科目" @click="() => (openCourseData = true)">
            </TnFormItem>
            <view style="display: flex" @click="() => (openCourseData = true)">
              <view>{{ courseName }}</view>
              <TnIcon name="right" />
            </view>
          </view>
          <view class="time">
            <TnFormItem label="授课区域"></TnFormItem>
            <view style="display: flex" @click="() => (openTarea = true)">
              <view>{{ tareaName }}</view>
              <TnIcon name="right" />
            </view>
          </view>
          <view class="time">
            <TnFormItem label="辅导方式"></TnFormItem>
            <view style="display: flex" @click="() => (openTutor = true)">
              <view>{{ tutorName }}</view>
              <TnIcon name="right" />
            </view>
          </view>
          <view style="width: 100%; display: flex; justify-content: space-around">
            <TnFormItem label="自我评价"></TnFormItem>
            <textarea placeholder="请输入自我评价" style="border: 2rpx #e6e6e6 solid" v-model="teacherDataForm.evaluation" />
          </view>
          <view class="time">
            <TnFormItem label="标签自己"></TnFormItem>
            <view class="my-lable">
              <view v-for="(item, index) in tags" :key="index"
                :class="['label-item', { 'selected': teacherDataForm.tags.includes(item.key) }]"
                @click="tagsClick(item.key)">
                {{ item.label }}
              </view>
            </view>
          </view>
          <view style="margin-top: 20rpx">
            <TnFormItem label="详细地址">
              <TnInput :underline="true" placeholder="详细地址" size="sm" v-model="teacherDataForm.address" />
            </TnFormItem>
          </view>

        </template>
        <template v-if="currentStep >= 0">
          <TnFormItem label="上传身份证（人像面）"></TnFormItem>
          <template v-if="teacherDataForm.id != null && teacherDataForm.idCardPhoto">
            <view style="width: 160rpx; height: 160rpx; position: relative">
              <view class="remove-img" @tap.remove="removeImg('idCardPhoto')">
                X
              </view>
              <image style="width: 160rpx; height: 160rpx" :src="teacherDataForm.idCardPhoto
                ? config.baseUrl + '/file/' + teacherDataForm.idCardPhoto
                : null
                " />
            </view>
          </template>
          <template v-else>
            <TnImageUpload ref="imageUploadidCardPhoto" :limit="1" :action="actionUrl" class="upload_img"
              :show-remove="true" :custom-upload-handler="uploadHandle">
              <template #uploadBtn>
                <view class="upload-new-btn tn-flex-center" style="height: 160rpx; width: 160rpx"
                  @tap.stop="chooseIdCardPhoto">
                  <TnIcon name="add" size="70" />
                </view>
              </template>
              <template #uploadImage="{ data }">
                <view class="remove-img" @tap.remove="removeImg('idCardPhoto')">
                  X
                </view>
                <image style="width: 160rpx; height: 160rpx" :src="teacherDataForm.idCardPhoto
                  ? config.baseUrl + '/file/' + teacherDataForm.idCardPhoto
                  : null
                  " />
              </template>
            </TnImageUpload>
          </template>
          <TnFormItem label="上传学毕业证/学信网正面"></TnFormItem>
          <template v-if="teacherDataForm.id != null && teacherDataForm.diploma">
            <view style="width: 160rpx; height: 160rpx; position: relative">
              <view class="remove-img" @tap.remove="removeImg('diploma')">
                X
              </view>
              <image style="width: 160rpx; height: 160rpx" :src="teacherDataForm.diploma
                ? config.baseUrl + '/file/' + teacherDataForm.diploma
                : null
                " />
            </view>
          </template>
          <template v-else>
            <TnImageUpload ref="imageUploadDiploma" :limit="1" :action="actionUrl" class="upload_img"
              :show-remove="true" :custom-upload-handler="uploadHandle">
              <template #uploadBtn>
                <view class="upload-new-btn tn-flex-center" style="height: 160rpx; width: 160rpx"
                  @tap.stop="chooseUploadDiploma">
                  <TnIcon name="add" size="70" />
                </view>
              </template>
              <template #uploadImage="{ data }">
                <view class="remove-img" @tap.remove="removeImg('diploma')">
                  X
                </view>
                <image style="width: 160rpx; height: 160rpx" :src="teacherDataForm.diploma
                  ? config.baseUrl + '/file/' + teacherDataForm.diploma
                  : null
                  " />
              </template>
            </TnImageUpload>
          </template>

          <TnFormItem label="上传荣誉证书，如四六级证书"></TnFormItem>
          <view style="display: flex">
            <view class="upload_img" style="position: relative" v-for="(item, index) in teacherDataForm.honor">
              <view class="remove-img" @tap.remove="removeImg('honor', index)">
                X
              </view>
              <image style="width: 160rpx; height: 160rpx" :src="item ? config.baseUrl + '/file/' + item : null" />
            </view>
            <TnImageUpload ref="imageUploadhonor" :action="actionUrl" style="margin-left: 15rpx" class="upload_img"
              :show-remove="true" v-model="teacherDataForm.honor" :custom-upload-handler="uploadHandle">
              <template #uploadBtn>
                <view class="upload-new-btn tn-flex-center" style="height: 160rpx; width: 160rpx"
                  @tap.stop="chooseUploadhonor">
                  <TnIcon name="add" size="70" />
                </view>
              </template>
              <template #uploadImage="{ data }"></template>
            </TnImageUpload>
          </view>
          <TnFormItem label="上传在职证明正面"></TnFormItem>
          <template v-if="teacherDataForm.id != null && teacherDataForm.jobProve">
            <view style="width: 160rpx; height: 160rpx; position: relative">
              <view class="remove-img" @tap.remove="removeImg('jobProve')">
                X
              </view>
              <image style="width: 160rpx; height: 160rpx" :src="teacherDataForm.jobProve
                ? config.baseUrl + '/file/' + teacherDataForm.jobProve
                : null
                " />
            </view>
          </template>
          <template v-else>
            <TnImageUpload ref="imageUploadjobProve" :limit="1" :action="actionUrl" class="upload_img"
              :show-remove="true" :custom-upload-handler="uploadHandle">
              <template #uploadBtn>
                <view class="upload-new-btn tn-flex-center" style="height: 160rpx; width: 160rpx"
                  @tap.stop="chooseUploadjobProve">
                  <TnIcon name="add" size="70" />
                </view>
              </template>
              <template #uploadImage="{ data }">
                <view class="remove-img" @tap.remove="removeImg('jobProve')">
                  X
                </view>
                <image style="width: 160rpx; height: 160rpx" :src="teacherDataForm.jobProve
                  ? config.baseUrl + '/file/' + teacherDataForm.jobProve
                  : null
                  " />
              </template>
            </TnImageUpload>
          </template>
          <TnFormItem label="其他证书（最多4张图）"></TnFormItem>
          <view style="display: flex">
            <view class="upload_img" style="position: relative" v-for="(item, index) in teacherDataForm.certificate">
              <view class="remove-img" @tap.remove="removeImg('certificate', index)">
                X
              </view>
              <image style="width: 160rpx; height: 160rpx" :src="item ? config.baseUrl + '/file/' + item : null" />
            </view>
            <TnImageUpload ref="imageUploadcertificate" :action="actionUrl" style="margin-left: 15rpx"
              class="upload_img" :show-remove="true" v-model="teacherDataForm.certificate"
              :custom-upload-handler="uploadHandle">
              <template #uploadBtn>
                <view class="upload-new-btn tn-flex-center" style="height: 160rpx; width: 160rpx"
                  @tap.stop="chooseUploadcertificate">
                  <TnIcon name="add" size="70" />
                </view>
              </template>
              <template #uploadImage="{ data }"></template>
            </TnImageUpload>
          </view>
          <view class="nonsense">
            <view style="
                display: flex;
                justify-content: space-around;
                margin: 20rpx;
              ">
              <!--              <image src="/static/avatar.jpg"/>-->
              <view class="text">
                <text style="font-size: 20rpx; color: #818181">官方提醒</text>
                <view style="
                    font-size: 28rpx;
                    display: flex;
                    flex-direction: column;
                  ">
                  <text>合格证件要求：</text>
                  <text> 1、确保姓名和注册姓名一致</text>
                  <text> 2、确保姓名、号码等内容清晰可见</text>
                  <text> 3、文件限jpg、gif、png格式，小于200k</text>
                  <text> 4、证件有效期三个月以上</text>
                </view>
              </view>
            </view>
          </view>
        </template>
      </TnForm>
      <view style="
          width: 100%;
          height: 222rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
        ">
        <TnButton :width="686" :height="96" bg-color="#0045cf" text-color="#fff" @click="currentStep = -1"
          v-if="currentStep === 0">
          上一步
        </TnButton>
        <TnButton :width="686" :height="96" bg-color="#0045cf" text-color="#fff" @click="submitForm">
          {{ currentStep === -1 ? "下一步" : "提交" }}
        </TnButton>
      </view>
    </view>
  </view>
  <TnDateTimePicker v-model="teacherDataForm.birthday" v-model:open="openDateTimePicker" format="YYYY-MM-DD"
    min-time="1950/01/01" confirm-color="#0052D9" />
  <!--  籍贯-->
  <TnPicker v-model="regionValue" v-model:open="openRegion" :data="regionsData" @confirm="confirmRegions"
    confirm-color="#0052D9" />
  <TnPicker v-model="teacherDataForm.currentIdentity" v-model:open="openCurrentIdentity" :data="statusData"
    confirm-color="#0052D9" />
  <TnPicker v-model="teacherDataForm.education" v-model:open="openEduPicker" :data="educationData" @confirm="confirmEdu"
    confirm-color="#0052D9" />
  <TnPicker v-model="worksValue" v-model:open="openWorks" :data="regionsData" @confirm="workPickerClick"
    confirm-color="#0052D9" />
  <!--  授课科目-->
  <TnPopup v-model="openCourseData" open-direction="bottom" :close-btn="true" height="80%">
    <scroll-view scroll-y class="tn-p-lg tn-white_bg tn-radius scroll-view">
      <TnCheckboxGroup v-model="teacherDataForm.tCourse" label-disabled @change="confirmTCourse" active-color="#0052D9">
        <view v-for="item in courseData" style="width: 100%">
          <view class="teach_title">{{ item.name }}</view>
          <view v-for="item1 in item.grade">
            <view class="item_one">{{ item1.name }}</view>
            <view class="check_box">
              <view v-if="item1.course.length > 0" v-for="item2 in item1.course" class="check_item">
                <TnCheckbox :label="item2.id">{{ item2.name }}</TnCheckbox>
              </view>
            </view>
          </view>
        </view>
      </TnCheckboxGroup>
    </scroll-view>
  </TnPopup>
  <TnPicker v-model="tareaDatavalue" v-model:open="openTarea" :data="regionsData" @confirm="areapickerClick"
    confirm-color="#0052D9" />
  <!--辅导方式-->
  <TnPicker v-model="teacherDataForm.tutor" v-model:open="openTutor" :data="tutorData" @confirm="tutorPickerClick"
    confirm-color="#0052D9" />
</template>

<style lang="scss">
page {
  padding-bottom: 100rpx;
}

.teacher-info {
  &-steps {
    width: 400rpx;
    margin: 0 auto;
  }

  &-steps .tn-step__line {
    left: -30rpx !important;
  }

  &-data {
    padding: 20rpx;

    &-avatar {
      width: 100%;
      height: 272rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }
}

.time {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid #e6e6e6;

  .my-lable {
    width: 80%;
    padding: 10rpx;
    margin: 10rpx;
    display: flex;
    flex-wrap: wrap;

    .label-item {
      width: calc(33.33% - 20rpx);
      /* 让每个子元素占据容器的 1/3 宽度，并考虑间距 */
      box-sizing: border-box;
      /* 包含 padding 和 border 在内的宽度 */
      padding: 10rpx;
      text-align: center;
      /* 文字居中 */
      margin: 10rpx;
      /* 设置外边距 */
      background: #F3F3F3;
    }

    .label-item.selected {
      background: #F2F3FF;
      color: #0052D9;
    }
  }
}

.upload_img {
  background: #f1f1f1;
  width: 160rpx;
  height: 160rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12rpx;
}

.remove-img {
  background: #8e8e8e;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 40rpx;
  height: 40rpx;
  border-radius: 0 0 0 12rpx;
  color: #ffffff;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps .tn-step__line {
  left: -30rpx !important;
}

.nonsense {
  margin-top: 50rpx;
  border-top: 3rpx #8e8e8e solid;
  width: 100%;
  height: 304rpx;
  display: flex;
  justify-content: space-around;

  image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 999rpx;
  }

  .text {
    padding: 20rpx;
    width: 598rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}

.scroll-view {
  height: 100%;
  width: 100%;
}

.teach_title {
  margin-top: 20rpx;
}

.item_one {
  margin-left: 15px;
}

.check_box {
  //display: flex;
  flex-wrap: wrap;

  .check_item {
    flex-basis: 25%;
    /* 每行显示四个 */
    margin-left: 30px;
  }
}
</style>
